// useTransition 是一个帮助你在不阻塞 UI 的情况下更新状态的 React Hook。

// useTransition 用于标记一些更新为“可中断/低优先级”，React 会在后台处理这些更新，同时保持 UI 的交互流畅。

import { useState, useTransition } from "react";
function useTransitionInstance() {
  const [text, setText] = useState("");
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setText(e.target.value); // 高优先级
    startTransition(() => {
      // 低优先级更新 后台自动渲染不会阻塞线程
      const newList = Array(10000).fill(e.target.value);
      setList(newList);
    });
  };

  return (
    <div>
      <input value={text} onChange={handleChange} />
      {isPending ? "加载中..." : list.map((i, idx) => <div key={idx}>{i}</div>)}
    </div>
  );
}

export default useTransitionInstance;
